﻿<%@ Page Title="FSE | Art Supplies" Language="VB" MasterPageFile="~/FSE_Master_Page.master" AutoEventWireup="false" CodeFile="Art Supplies.aspx.vb" Inherits="Art_Supplies" %>
<%@ MasterType VirtualPath="~/FSE_Master_Page.master" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


<asp:Content ID="Content1" ContentPlaceHolderID="Body" runat="server">


<script type="text/javascript">

    
    $(document).ready(function() {
        var catwidth = document.getElementById('catbarcon').offsetWidth;
        $('#catbar').css('width', catwidth - 2);
    });

    $(window).resize(function() {
        $('#catbar').css('width', catwidth - 2);
    });






    $(function() {
    $('#art_supplieslink').addClass('curLink');
        $('#fav_collapsed').click(function() {
            $('#a_collapsed').css('display', 'none');
            $('#fav_collapsed').animate({
                height: '0'
            }, 100, function() {
                $('#a_expanded').fadeIn('fast');
                $('#fav_expanded').animate({
                    bottom: '-26'
                }
                , 100);
            });
        });
        
        $('#fav_expanded').click(function() {
            $('#a_expanded').css('display', 'none');
            $('#fav_expanded').animate({
                bottom: '0'
            }, 100, function() {
                $('#a_collapsed').fadeIn('fast');
                $('#fav_collapsed').animate({
                    height: '24'
                }
                , 100);
            });
        });
        $('#dep_img').click(function() {
        var h = $('#<%=art_cat_ddb.clientid %>').height();
            if (h === 0) {
                $('.dep_ddb_class').css('display', 'block');
                $('.dep_ddb_class').animate({
                    height: '500'
                }, 200);
            } else if (h != 0) {
                listbox_hide();
               
            };
        });
    });

    $(document).click(function(e) {
        var imgbox = $('#dep_img');
        var listbox = $('.dep_ddb_class');
        var container = $('#dep_ddb_div');
        //if(e.target.id === 'dep_img'){alert('true')};
        if ((e.target.id === 'dep_img' || container.has(e.target).length === 0) && listbox.height() > 0) {
            listbox_hide();
            //listbox.hide();
            //listbox.css('height', '0');
        }
    });

    function listbox_hide() {
        var listbox = $('.dep_ddb_class');
        var filterID = '#<%=filterButton.clientid %>';
        listbox.stop();
        listbox.hide();
        listbox.css('height', '0');
        $(filterID).focus();
        $(filterID).click();
    };


    $(function() {
    $('#<%=art_cat_ddb.clientid %>').change(function() { //Function to keep the dropdownlist label updated (for departments).
    var totalOptions = nodeCount('<%=art_cat_ddb.clientid %>', 'OPTION');
            var selected = selectedCount('<%=art_cat_ddb.clientid %>', totalOptions);
            var Lbl = '#<%=dep_label.clientid %>'
            var obj = document.getElementById('<%=art_cat_ddb.clientid %>');
            if (selected == 1) {
                var newLabelText = obj.options[obj.selectedIndex].text;
                $(Lbl).text(newLabelText);
            } else if (selected == 0) {
                $(Lbl).text('Art Categories');
            } else {
                var newLabelText = selected + ' departments selected'
                $(Lbl).text(newLabelText);
            };
        });

        $('#<%=art_cat_ddb.clientid %>').keypress(function(event) {
            var key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
            if (key == 13 && event.shiftKey == false) {
                var filterID = '#<%=filterButton.clientid %>';
                var listbox = $('#<%=art_cat_ddb.clientid %>');
                listbox_hide();
                //listbox.hide();
                //listbox.css('height', '0');
                //$(filterID).focus();
                //$(filterID).click();
            };
        });
    });

    function nodeCount(myid, mynodename) { //Function to count the total number of nodes within an element.
        var count = 0; //Counts actual nodes
        var listbox = document.getElementById(myid);
        for (var i = 0; i < listbox.childNodes.length; i++) {
            var node = listbox.childNodes[i];
            if (node.nodeType == Node.ELEMENT_NODE && node.nodeName == mynodename) {
                count++;
            };
        };
        return count
    };

    function selectedCount(myid, totalOptions) { //Function to count the total number of selected options in a listbox.
        var count = 0; //Counts selected nodes
        var listbox = document.getElementById(myid);
        for (i = 0; i < totalOptions; i++) {
            if (listbox.options[i].selected) {
                count++;
            };
        };
        return count;
    };



    $(function() {
        $('#<%=art_cat_ddb.clientid %> option').dblclick(function() {
            listbox_hide();
        });
    });

    function testfade() {
        //$('#nonFav_container').slideToggle();
        $('#nonFav_container').fadeOut('fast');
    };
    function testfadeIn() {
        //$('#nonFav_container').slideDown();
        $('#nonFav_container').fadeIn('fast');
    };

    function createPost() {
        //$('#nonFav_container').animate({
        // top: '300'
        //}, 100, function() {
        //  $('#createPostDiv').fadeIn('fast');
        //});
        $('#createPostDiv').slideDown('fast');
        $('#enterInfoLabel').show();
        setTimeout(function() { $('#enterInfoLabel').fadeOut('slow') }, 4000);

    };

    function toggleCP() {
        $('#createPostDiv').slideToggle('fast');
        $('#enterInfoLabel').hide();
    };

    function reset_click() {
        $('#<%=dep_label.clientid %>').text('Art Categories');
        $('#<%=art_cat_ddb.clientid %> option:selected').each(function() {
            $(this).removeAttr('selected');
        });
    };
   
    

    


</script>


    
<asp:SqlDataSource ID="artdb" SelectCommand="select ID [ID], [Category] from [Art Category]" 
ConnectionString="<%$ ConnectionStrings:FSEdepartmentsConnection %>" runat="server" />


    <div class="dp" style="width:100%;height:100%;position:relative;margin-top:20px;min-width:842px;vertical-align:top;margin-bottom:auto;">
        <table id="results_con" class="t_con" style="width:100%;min-width:842px;max-width:950px;height:100%;margin:0 auto;">
            <tr style="height:100%;">
                
                <!-- TABLE OF CONTENTS / STICKY MENU CONTROL -->
                <td style="width:130px;vertical-align:top;position:relative;text-align:right;margin-right:10px;padding-right:10px;">
                    
                    <div id="links_con" style="background-color:transparent;border:solid 2px transparent;z-index:1;
                        vertical-align:middle; width:106px; height:auto;margin-bottom:10px;position:relative;left:-5px;
                        text-align:right;padding:5px 2px 5px 2px;">
                        <a id="post" style="cursor:pointer;" onclick="javascript:createPost();">Create Post</a><br />
                        <a style="cursor:pointer;" href="Home.aspx">My Account</a>
                    </div>
                    
                        
                    <div style="position:relative;left:-5px;">
                    <div id="locator" style="height:1px;width:1px;position:absolute;top:0;left:0;z-index:-1;"></div>
                    <div id="toc">
                    <div class="selector_div" id="toc_selector" style="z-index:-1"></div>
                    <div id="toc_vl" class="vertical_line"></div>
                    <h3><a id="homelink" class="toc_link" href="Home.aspx">textbooks</a></h3>
                    <h3><a id="art_supplieslink" class="toc_link" href="Art Supplies.aspx">art supplies</a></h3>
                    <h3><a id="softwarelink" class="toc_link" href="Software.aspx">software</a></h3>
                    <h3><a id="hardwarelink" class="toc_link" href="Hardware.aspx">electronics</a></h3>
                    <h3><a id="misclink" class="toc_link" href="Misc.aspx">misc</a></h3>
                    
                    </div>
                    </div>
                </td>
                
                <!-- RESULTS DIVISION -->
                <td style="width:auto;margin:0;padding:0;">
                    
                    <!-- CATEGORY BAR -->
                    <div class="divcon" id="catbarcon" style="width:100%;">
                        <div id="catbar">
                            <table id="dropdownbox_table" class="t_con" style="height:34px;width:606px;">
                                <tr style="height:34px;">
                                    <td class="dep_cell" style="padding:10px 0 0 10px;">
                                        <div class="a">
                                            <img src="Images/dep_box.jpg" onmousedown="changeSrc('#dep_img','Images/dep_box_click.jpg');" 
                                             onmouseup="changeSrc('#dep_img','Images/dep_box_hover.jpg');" onmouseout="changeSrc('#dep_img','Images/dep_box.jpg');" onmouseover="changeSrc('#dep_img','Images/dep_box_hover.jpg');" id="dep_img" width="245px" height="24px" alt="Department selection." />
                                            <div class="b" id="dep_img_div" style="top:0;left:0;">
                                                <asp:Label runat="server" Text="Art Categories" ID="dep_label" CssClass="dep_label_class"></asp:Label>
                                            </div>
                                            
                                            <div id="dep_ddb_div" class="b" style="height:500px;width:245px;">
                                            
                                            <asp:ListBox SelectionMode="Multiple" runat="server" CssClass="dep_ddb_class dep_ddb_class_hidden" DataSourceID="artdb" DataTextField="Category" DataValueField="ID" ID="art_cat_ddb">
                                             </asp:ListBox>
                                             
                                            </div>
                                        </div>
                                    </td>
                                    <td class="class_cell" id="art_cell" style="padding:10px 0 0 10px;">
                                        <asp:Button runat="server" Width="70px" height="24px" Text="Reset" ID="clearButton" OnClientClick="javascript:reset_click();" CssClass="class_linkbutton" />
                                    </td>
                                    <td style="padding:10px 5px 0px 10px; width:200px;">
                                        <asp:Button runat="server" Width="100px" Text="Filter Results" ID="filterButton" CssClass="class_linkbutton_filter"></asp:Button>
                                        
                                    </td>
                                </tr>
                            </table>
                        
                        
                            
                            <div class="favlink" style="z-index:2; background:#97a7b4;"></div>
                            <div id="fav_expanded" class="favlink"  onclick="javascript:testfadeIn();" style="cursor:pointer;">
                                <a id="a_expanded" target="_blank">
                                    Show All
                                </a>
                            </div>
                        </div>
                        <h3 id="enterInfoLabel" style="position:absolute; right:-170px; bottom:-150; color:Red;overflow:visible;display:none;">&lt;&lt;&lt;<br />Enter product<br />information here.</h3>
                    </div>
                    <div id="createPostDiv" style="position:relative; display:none; height: 290px; width:100%; margin:0 auto; border:solid 2px #97a6b2; margin-top:10px;">
                        <h3 style="margin-left:10px;">TODO: CREATE A POST HERE</h3>
                        <p>
  <label for="amount">Donation amount ($50 increments):</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
 
<div id="slider" style="width:100px;height:100px;background-color:blue;"></div>
                        <div style="position:absolute; bottom:3px; right:25px;">
                            <p style="color:Red;cursor:pointer;" onclick="javascript:toggleCP();">Cancel</p>
                        </div>
                       
                    </div>
                    
                    <div id="nonFav_container" class="a">
                        <div class="a">
                        
                            <asp:UpdatePanel ID="results" UpdateMode="Conditional" runat="server" >
                                <ContentTemplate>
                                    
                                    <ul id="result_ul" style="margin:0;padding:0;list-style:none;width:100%;">
                                            <asp:SqlDataSource ID="posts" runat="server" ConnectionString="<%$ ConnectionStrings:FSEdepartmentsConnection %>">
                                                <SelectParameters>
                                                    <asp:Parameter Name="Type" Type="Int32" DefaultValue="2" />
                                                </SelectParameters>
                                            </asp:SqlDataSource>
                                            <asp:Repeater runat="server" DataSourceID="posts" ID="resultsRepeater">
                                                <ItemTemplate>
                                                    <li>
                                                        <div class="resultContainer_class">
                                                            <div class="result_class">
                                                                
                                                                <table class="t_con">
                                                                    <tr>
                                                                        <td class="rb_seller"><h3>User</h3></td>
                                                                        <td class="rb_class"><h3>User Rating</h3></td>
                                                                        <td class="rb_class"><h3>Item</h3></td>
                                                                        <td class="rb_title"><h3>Price</h3></td>
                                                                        <td class="rb_author"><h3>Condition</h3></td>
                                                                        <td class="rb_isbn"><h3></h3></td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="rb_seller">
                                                                            <p><%#Eval("firstname") & " " & Eval("lastname")%></p></td>
                                                                        <td class="rb_seller"><p><div class="star_div" style="border:none;" id="userStar" data-score="<%# format((Eval("userRating")/eval("userVotes"))/2,"#.##")%>"></div></p></td>
                                                                        <td class="rb_class"><p><%#eval("productName") %></p></td>
                                                                        <td class="rb_title"><p><%#format(cdec(Eval("Price")),"$#,##0.00")%></p></td>
                                                                        <td class="rb_author"><p><div class="star_div" style="border:none;" id="star" data-score="<%# format(Eval("Condition")/2,"#.##")  %>"></div></p></td>
                                                                        <td class="rb_isbn"><p></p></td>
                                                                    </tr>
                                                                </table>
                                                            </div>
                                                            <div class="postDetail" style="margin:4px; margin-top:56px; color:white;padding:0;background:transparent;">
                                                            <p class="postDetailText"><%#eval("productDesc") %></div>
                                                        </div>
                                                    </li>
                                                </ItemTemplate>
                                            </asp:Repeater>
                                        </ul>
                                    </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="filterButton" />
                                        <asp:AsyncPostBackTrigger ControlID="clearButton" />
                                    </Triggers>
                                </asp:UpdatePanel>
                            </div>
                            
                        </div>
                        
                   <!-- <div class="dc" id="body_div" style="height:100%;width:100%;background:transparent;border:solid 1px gray;margin:0;">
                        
                    </div> -->
                </td>
            </tr>
        </table> 
    </div>
  
</asp:Content>


